<template>
  <div>
    <el-form
      ref="form"
      label-width="80px"
      :v-loading="loading"
      :model="formData"
      :rules="rules"
    >
      <el-form-item label="子项目" prop="project_name">
        <el-input
          v-model="formData.project_name"
          placeholder="项目名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="所属项目" prop="pid">
        <el-input v-model="data.username" placeholder="所属项目"></el-input>
      </el-form-item>
    </el-form>
    <div style="display: flex; justify-content: flex-end;">
      <el-button type="primary" @click="submit">提交</el-button>
    </div>
  </div>
</template>

<script>
import { addsubproject } from '@/api/user/project.js';

export default {
  props: ['data'],
  watch: {
    data: {
      handler: function (val) {
        console.log(val, 'value');
        this.formData.pid = val.id;
        this.formData.project_name = '';
      },
      immediate: true,
    },
  },
  data() {
    return {
      loading: false,
      formData: {
        pid: '',
        project_name: '',
      },
      rules: {
        project_name: [
          { required: true, message: '请输入项目名称', trigger: 'blur' },
        ],
        pid: [{ required: true, message: '请选择父项目', trigger: 'blur' }],
      },
    };
  },
  methods: {
    submit() {
      console.log(this.formData);
      this.loading = true;
      this.$refs.form.validate((valid) => {
        if (valid) {
          addsubproject(this.formData)
            .then((res) => {
              this.$message.success('添加成功');
              this.formData.project_name = '';
              this.$emit('update:visible', false);
              this.$emit("success")
            })
            .finally(() => {
              this.loading = false;
            });
        } else {
          this.loading = false;
        }
      });
    },
  },
};
</script>

<style scoped></style>
